<route lang="json5" type="page">
{
  layout: 'tabbar',
  style: {
    navigationBarTitleText: '首页',
  },
}
</route>

<template>
  <view>
    <htm-popup />
    <wd-swiper custom-class="m-3" :list="state.bannerList" autoplay></wd-swiper>
    <view>
      <image style="width: 100%" mode="widthFix" src="/src/static/images/brandBanner.jpg"></image>
      <!-- <wd-row>
        <wd-col :span="8" :key="index" v-for="(item, index) in state.brandList">
          <wd-img
            width="33.33333333333333vw"
            height="33.33333333333333vw"
            mode="aspectFill"
            :src="item"
          ></wd-img>
        </wd-col>
      </wd-row> -->
    </view>
    <view class="m-3 rounded-lg">
      <view class="product-header">
        <text>热门产品</text>
        <htm-button type="text" @click="handleClick">
          <text style="font-weight: bold; color: #262626">查询更多</text>
          <wd-icon custom-style="color: #262626" name="arrow-right" size="24rpx"></wd-icon>
        </htm-button>
      </view>
      <view class="product-grounp">
        <htm-card
          v-for="(item, index) in state.hotList"
          :key="item.id"
          v-bind="item"
          :class="getClass(index)"
        />
      </view>
    </view>
    <wd-backtop :scrollTop="scrollTop" customStyle="opacity: 0.8;"></wd-backtop>
  </view>
</template>

<script lang="ts" setup>
//
import {
  getBannerList,
  getBrandList,
  IBannerResult,
  IBrandResult,
  getHotList,
  IProductResult,
} from '@/service/index'
import htmCard from '@/components/htm-card/htm-card.vue'
import htmPopup from '@/components/htm-popup/htm-popup.vue'
import { onLoad } from '@dcloudio/uni-app'
import { useProfileStore, useShopcartStore } from '@/store'

const profileStore = useProfileStore()
const shopcartStore = useShopcartStore()

// 根据索引动态返回类名
const getClass = (index: number): string => {
  let classes = ''
  if (index % 2 === 1) {
    classes += 'even '
  }
  if (index >= 2) {
    classes += 'nth-child-3'
  }
  return classes.trim()
}

const { chargeStore } = profileStore
const state = reactive({
  hotList: [] as IProductResult[],
  bannerList: [] as string[],
  brandList: [] as string[],
})

function handleClick() {
  uni.navigateTo({
    url: '/pages/detail/detail',
  })
}

const initData = async () => {
  if (state.bannerList.length === 0) {
    const {
      loading: loadingBanners,
      data: bannerData,
      run: runBanners,
    } = useRequest<IBannerResult[]>(() => getBannerList())
    const bannerList = await runBanners()
    bannerList.forEach((item: IBannerResult) => {
      state.bannerList.push(item.imageUrl)
    })
  }
  // if (state.brandList.length === 0) {
  //   const {
  //     loading: loadingBrands,
  //     data: brandData,
  //     run: runBrands,
  //   } = useRequest<IBrandResult[]>(() => getBrandList())
  //   const brandList = await runBrands()
  //   brandList.forEach((item: IBrandResult) => {
  //     state.brandList.push(item.brandImage)
  //   })
  // }
  if (state.hotList.length === 0) {
    const {
      loading: loadingHots,
      data: hotData,
      run: runHots,
    } = useRequest<IProductResult[]>(() => getHotList())
    state.hotList = await runHots()
  }
}

onActivated(async () => {
  initData()
})

onLoad(async () => {
  initData()
  if (chargeStore.storeCode) {
    shopcartStore.initShopcart(chargeStore.storeCode)
  }
})

const scrollTop = ref<number>(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
</script>

<style lang="scss">
//
.product-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  > text {
    font-size: 32rpx;
    font-weight: bold;
    color: #262626;
  }
  .wd-button {
    height: 40rpx;
    text {
      font-size: 24rpx;
    }
  }
}

.product-grounp {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
  margin-top: 15rpx;
}

.wd-button.is-text {
  color: #999;
}

.even {
  margin-left: 10px;
}

.nth-child-3 {
  margin-top: 10px;
}
</style>
